<template>
  <view class="group-chat-container">
    <BackButton />
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="user-info">
        <view class="user-text">
          <text class="title">{{ roomName }}</text>
        </view>
      </view>
    </view>

    <!-- 聊天消息区域 -->
    <scroll-view 
      class="chat-messages" 
      ref="chatMessages" 
      scroll-y="true" 
      :scroll-into-view="scrollToView" 
      scroll-with-animation="true" 
      :style="{ height: windowHeight + 'px' }">
      
      
      <!-- 消息列表 -->
      <view v-for="(msg, index) in messages" :key="index" class="message-item"
        :class="{ 'other-message': !msg.isMine, 'my-message': msg.isMine }" :id="'message' + index">
        
        <!-- 对方头像 -->
        <image v-if="!msg.isMine" class="avatar" :src="msg.sender_avatar"></image>
        
        <view class="message-content">
          <!-- 时间戳 -->
          <view class="message-time">{{ msg.time }}</view>
          <view class="message-bubble">
            {{ msg.content }}
          </view>
        </view>
        
        <!-- 自己头像 -->
        <image v-if="msg.isMine" class="avatar" :src="msg.sender_avatar"></image>
      </view>
    </scroll-view>
    
    <!-- 输入区域 -->
    <view class="input-area">
      <image class="emoji-btn" src="/static/image/emoji.png" @click="showEmoji"></image>
      <input type="text" v-model="inputMessage" class="message-input" placeholder="请输入消息..." @confirm="sendMessage" />
      <button class="send-btn" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script src="./group-chat.js"></script>
<style lang="scss" src="./group-chat.scss"></style>
